CSS Styling Image

    In this CSS tutorial, we will be learning how to style an image element. We will also learn how to use different properties like border-radius , margin, height and other properties to display a responsive image.

    Rounded Images

    By default, like other elements, the <img> element also form a rectangular element box, and the image also displays in a rectangular format.  But using the border-radius property, we can print an image in a circular or rounded format, instead of a regular rectangular.

    Example 

    <!DOCTYPE html>
<html>
<head>
<style>
img{
border-radius: 50%;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<img src="cat.jpg" alt="cat image">
</body>
</html>

    Note: A 50% border-radius value will form a circular border for the image.

    Create Thumbnail Images

    Thumbnail images are used to provide the preview of the image, they can also be used as a tooltip. Where the thumbnail act as a tooltip and its big picture act as a tooltip content. To create a thumbnail, we use the border and padding properties. The border property creates a border around the image, and the padding property provides some space between the image and border.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                border: 2px solid grey;
                padding: 10px;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <p>A thumbnail image</p>
        <img src="gradian_blue.png" alt="cat image">
    </body>
</html>

    Create a Responsive Image

    A responsive image adjusts its dimensions according to the user browser display. To create a responsive image, we should use absolute value like auto and percentage.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                /*the image will cover the complete width*/
                max-width: 100%;
                /*the hight will automatically managed according to the width*/
                height:auto;
              }
        </style>
    </head>
    <body>
        <p>A Responsive image</p>
        <img src="img.png" alt="cat image">
    </body>
</html>

    Create Image Cards

    To create a card, we use the box-shadow property.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
                div.card {
                  width: 80%;
                  background-color: white;
                  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                  margin-bottom: 25px;
                    }
                img{
                    width: 100%;
                }

                div.container {
                  text-align: center;
                  padding: 10px 20px;
                }
        </style>
    </head>
    <body>
        <div class="card">
            <img src="img.png" alt="cat image">
            <div class="container"> <p>About Image</p> </div>
    </div>
    </body>
</html>

    Write Text on an Image

    We can write a text over an image by setting the text positioning.

    Example

    Put a text on the center of the image. 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            .box{
              position: relative;
            }

            .text {
              position: absolute;
              top: 50%;
              left: 50%;
              /*50% to the negetive x and y axes*/
              transform: translate(-50%, -50%);
            }
            img {
              width: 100%;
              height: auto;
              /*so the text could be easily read*/
              opacity: 0.5;
            }
        </style>
    </head>
<body>
<div class="box">
  <img src="img.png" alt="image" >
  <div class="text">Text at Center</div>
</div>
</body>
</html>

    CSS image filter property

    The filter image property can manipulate the visual effect of an image. For instance, we can increase the image's saturation or blur the image or make it black and white. The filter value can accept one of these methods

    Filter values Description
    none It specifies no effect on the image, and it is the default value of filter property.
    blur() It creates a blur effect on the image.
    brightness() It alters the brightness of the image.
    contrast() It alters the contrast of the image.
    drop-shadow(horizontal vertical blur color) It creates a shadow effect on the image.
    grayscale(%) It specifies that the image  grayscale. 0%  represents the default image and 100% represents black and white image.
    invert(%) Inverts the image.
    opacity(%) Specify the opaqueness of the image.s
    sepia(%) set the default image to sepia.
    inherit Follow the value of the parent image filter property.

    Example

    Show a Black-white Image using the filter property 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            img {
              width: 100%;
              height: auto;
              filter:grayscale(100%);
            }
        </style>
    </head>
<body>
<img src="img.png" alt="image" >
</body>
</html>

    Summary

    • Always use absolute values like auto and % to display a responsive image.
    • Set the border-radius to 50%, and it will create a rounded image.
    • Using the border property, we can create a thumbnail.
    • We can use the box-shadow property to create a card image.
    Previous Tutorial Next Tutorial